<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
							<!-- onkeyup="Search()" -->
	<input type="text" name="searchText" id="search" >
	<div id = "div" ></div>
</body>
	<script type="text/javascript">
	// var search = document.getElementById("search");
	// function Search(){
	// 	    var xhr = new XMLHttpRequest();
	// 		xhr.open("GET","http://localhost:8080/Aug1st/search?areaName="+search.value);
	// 		xhr.onreadystatechange=function(){
	// 			if(xhr.status==200&&xhr.readyState==4){
	// 				var div = document.getElementById("div");
	// 				var ul = document.createElement("ul");
	// 				div.innerHTML="";
	// 				ul.innerHTML = "";
	// 				var rs = JSON.parse(xhr.responseText);
	// 				rs.forEach((item)=>{
	// 					let li = document.createElement("li");
	// 					li.innerHTML=item.areaName;
	// 					ul.appendChild(li);
	// 				});
	// 				div.appendChild(ul);
	// 			}
				
	// 		};
	// 		xhr.send(null);
	// }
	window.onload=function(){
		var div = document.getElementById("div");
		var search = document.getElementById("search");
		search.addEventListener("keyup",function(){
			var url = "http://localhost:8080/Aug1st/search?areaName="+search.value;
			var operator = divOperator(document.getElementById("div"),url);
			operator.createDiv();
		});
	}

	function divOperator(div,url){
		obj={};
		obj.createDiv=function(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET",url);
			xhr.onreadystatechange=function(){
				if(xhr.status==200&&xhr.readyState==4){
					var ul = document.createElement("ul");
					div.innerHTML="";
					ul.innerHTML = "";
					var rs = JSON.parse(xhr.responseText);
					rs.forEach((item)=>{
						let li = document.createElement("li");
						li.innerHTML=item.areaName;
						ul.appendChild(li);
					});
					div.appendChild(ul);
				}
				
			};
			xhr.send(null);
		}
		return obj;
	}
	</script>
</html>

































